<template>
	<view class="custom-tabbar" :style="{paddingBottom: safeAreaBottom + 'px'}">
		<!-- 悬浮菜单遮罩 -->
		<view class="fab-mask" v-if="showFabMenu" @tap="closeFabMenu"></view>
		
		<!-- 悬浮发布菜单 -->
		<view class="floating-actions" v-if="showFabMenu">
			<view class="sub-fabs">
				<view class="sub-fab" @tap="goToCreatePost">
					<image class="sub-fab-icon" src="https://img.icons8.com/fluency/48/edit.png" mode="aspectFit"></image>
					<text class="sub-fab-label">&nbsp;发布新帖</text>
				</view>
				<view class="sub-fab" @tap="goToCreateSite">
					<image class="sub-fab-icon" src="https://img.icons8.com/fluency/48/network.png" mode="aspectFit"></image>
					<text class="sub-fab-label">&nbsp;共同建站</text>
				</view>
				<view class="sub-fab" @tap="goToQuestion">
					<image class="sub-fab-icon" src="https://img.icons8.com/fluency/48/help.png" mode="aspectFit"></image>
					<text class="sub-fab-label">&nbsp;提问</text>
				</view>
			</view>
		</view>
		
		<view class="tabbar-container">
			<view 
				class="tabbar-item" 
				:class="{active: current === index, 'rotate-icon': index === 2 }" 
				v-for="(item, index) in tabList" 
				:key="index" 
				@tap="handleTabClick(index)"
			>
				<image 
					class="tab-icon" 
					:class="{rotated: index === 2 && showFabMenu}"
					:src="current === index ? item.activeIcon : item.icon" 
					mode="aspectFit"
				></image>
				<text class="tab-text" :class="{active: current === index}">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabbar',
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			safeAreaBottom: 0,
			showFabMenu: false, // 控制发布菜单显示
			tabList: [
				{
					text: '首页',
					pagePath: '/pages/index/index',
					icon: 'https://img.icons8.com/ios/50/home--v1.png',
					activeIcon: 'https://img.icons8.com/ios-filled/50/home.png'
				},
				{
					text: '懒人广场',
					pagePath: '/pages/lazy/lazy',
					icon: 'https://img.icons8.com/ios/50/stack.png',
					activeIcon: 'https://img.icons8.com/ios-filled/50/stack.png'
				},
				{
					text: '发布',
					pagePath: '/pages/release/release',
					icon: 'https://img.icons8.com/fluency/128/plus.png',
					activeIcon: 'https://img.icons8.com/fluency/128/plus.png'
				},
				{
					text: '消息',
					pagePath: '/pages/message/message',
					icon: 'https://img.icons8.com/ios/50/chat.png',
					activeIcon: 'https://img.icons8.com/ios-filled/50/chat.png'
				},
				{
					text: '我的',
					pagePath: '/pages/profile/profile',
					icon: 'https://img.icons8.com/ios/50/user--v1.png',
					activeIcon: 'https://img.icons8.com/ios-filled/50/user.png'
				}
			]
		}
	},
	watch: {
		current: {
			handler(newVal) {
				// current属性变化时的处理逻辑
				console.log('tabBar current 更新:', newVal);
			},
			immediate: true
		}
	},
	mounted() {
		// 获取安全区域信息
		const systemInfo = uni.getSystemInfoSync();
		this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
	},
	methods: {
		handleTabClick(index) {
			// 如果点击的是发布按钮（索引为2）
			if (index === 2) {
				 // 添加触觉反馈
            uni.vibrateShort({
                type: 'light'
            });
				this.toggleFabMenu();
				return;
			}
			
			// 关闭发布菜单
			if (this.showFabMenu) {
				this.showFabMenu = false;
			}
			
			if (this.current === index) return;
			
			const tabItem = this.tabList[index];
			if (!tabItem) return;
			
			// 发送切换事件给父组件
			this.$emit('switch', {
				index: index,
				pagePath: tabItem.pagePath,
				text: tabItem.text
			});
			
			// 跳转到对应页面
			uni.switchTab({
				url: tabItem.pagePath
			});
		},
		
		// 切换发布菜单显示状态
		toggleFabMenu() {
			this.showFabMenu = !this.showFabMenu;
		},
		
		// 关闭发布菜单
		closeFabMenu() {
			this.showFabMenu = false;
		},
		
		// 跳转到发帖页面
		goToCreatePost() {
			this.showFabMenu = false;
			uni.navigateTo({
				url: '/pages/create-post/create-post'
			});
		},
		
		// 跳转到共同建站页面
		goToCreateSite() {
			this.showFabMenu = false;
			uni.navigateTo({
				url: '/pages/create-site/create-site'
			});
		},
		
		// 跳转到提问页面
		goToQuestion() {
			this.showFabMenu = false;
			uni.showToast({
				title: '提问功能开发中...',
				icon: 'none'
			});
			// 后续可以添加具体的跳转逻辑
			// uni.navigateTo({
			//     url: '/pages/question/question'
			// });
		}
	}
}
</script>
// custom-tabbar的样式
// border-top: 1rpx solid #e5e5e5;
//     box-shadow: 0 4rpx 20rpx rgba(153, 153, 153, 0.3);
<style scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	
	padding-top: 30rpx;
	z-index: 1000;
}

.tabbar-container {
	display: flex;
	align-items: center;
	width: 90%;
	height: 120rpx;
	margin: auto;
	border-radius: 120rpx;
	padding: 10rpx 0;
	background: #fff;
	box-shadow: 0 4rpx 20rpx rgba(153, 153, 153, 0.3);
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8rpx 0;
	transition: all 0.2s ease;
}

.tabbar-item:active {
	transform: scale(0.95);
	background: rgba(255, 107, 53, 0.05);
	border-radius: 12rpx;
}

.tab-icon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 8rpx;
	transition: all 0.2s ease;
}

.tab-text {
	font-size: 20rpx;
	color: #3e3f41;
	transition: all 0.2s ease;
	line-height: 1;
}

.tab-text.active {
	color: #ff6b35;
	font-weight: bold;
}

/* 激活状态的动画效果 */
.tabbar-item.active .tab-icon {
	transform: scale(1.1);
}

/* 发布按钮旋转效果 */
.tab-icon.rotated {
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

/* 悬浮菜单遮罩 */
.fab-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 998;
}

/* 悬浮操作按钮容器 */
.floating-actions {
	position: fixed;
	bottom: 260rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: center;
	padding: 30rpx 0;
	border-radius: 20rpx;	
	background: #fff;
}
.floating-actions::after {
	content: '';
	position: absolute;
	bottom: -12rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 15rpx solid transparent;
	border-right: 15rpx solid transparent;
	border-top: 15rpx solid #ffffff;
	filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.15));
	z-index: 1000;
}
/* 子悬浮按钮容器 - 横向排列 */
.sub-fabs {
	display: flex;
	flex-direction: row;
	gap: 30rpx;
	align-items: center;
	justify-content: center;
	animation: fadeInUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	padding: 0 40rpx;
}

/* 子悬浮按钮 */
.sub-fab {
	display: flex;
	/* flex-direction: column; */
	align-items: center;
	background: #ffffff;
	border-radius: 25rpx;
	padding: 20rpx 25rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	min-width: 130rpx;
	justify-content: center;
	animation: slideInUp 0.3s ease;
	border: 2rpx solid #f0f0f0;
}

.sub-fab:nth-child(1) {
	animation-delay: 0.1s;
}

.sub-fab:nth-child(2) {
	animation-delay: 0.2s;
}

.sub-fab:nth-child(3) {
	animation-delay: 0.3s;
}

.sub-fab:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
}

.sub-fab-icon {
	width: 45rpx;
	height: 45rpx;
	margin-bottom: 12rpx;
}

.sub-fab-label {
	font-size: 24rpx;
	color: #333;
	font-weight: 600;
	white-space: nowrap;
	text-align: center;
	line-height: 1.2;
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx) scale(0.8);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.rotate-icon{
	 width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
</style>